<template>
  <div class="container">
    <!-- 数据大屏展示内容区域 -->
    <div ref="screenRef" class="screen">
      <!-- 顶部信息 -->
      <div class="screen-top">
        <screenTop></screenTop>
      </div>
      <!-- 中间核心部分 -->
      <div class="screen-main">
        <screenMain></screenMain>
      </div>
      <!-- 底部信息部分 -->
      <div class="screen-bottom">
        <screenBottom></screenBottom>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入子组件
import screenTop from "./components/screenTop.vue";
import screenMain from "./components/screenMain.vue";
import screenBottom from "./components/screenBottom.vue";

//获取大屏dom元素
let screenRef = ref();

//生命周期
onMounted(()=>{
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
})


//原生:监听视口的变化
window.onresize = () => {
  screenRef.value.style.transform = `scale(${get_screen_scale()}) translate(-50%,-50%)`;
}
//功能函数:计算大屏缩放比例
function get_screen_scale (w=1920, h=1080) {
  const ww = window.innerWidth / w;
  const wh = window.innerHeight / h;
  return ww < wh ? ww : wh
}
</script>
<script lang="ts">
export default {
  name:"Screen"
}
</script>

<style lang="css" scoped>
.container{
  width:100vw;
  height:100vh;
  background: url("@/assets/images_screen/screen_bg.jpg") no-repeat;
  background-size: cover;
}
/* 大屏展示区域 */
.container .screen{
  width: 1920px;
  height:1080px;
  position: fixed;  /*固定定位*/
  top:50%;  /*往下偏移一半*/
  left:50%;
  transform-origin: left top;  /*缩放基点*/
}

/*大屏上部分*/
.screen .screen-top{
  width:100%;
  height:10%;
  background-color: #d3d3d6;
  box-shadow: 10px 10px 5px #bbadad;
}

/**大屏主要区域 */
.screen .screen-main{
  width: 100%;
  height: 85%;
}

/*大屏下部分*/
.screen .screen-bottom{
  width: 100%;
  height: 5%;
}
</style>